<template>
  <div class="container">
    <!-- <div class="page app-container">
      <div class="header">
        <div>盘点清单</div>
      </div>
      <div>
        <div>盘点编码：{{ data.checkCode }}</div>
        <div>盘点人：{{ data.tenantName }}</div>
        <div>仓库：{{ data.warehouseName }}</div>
        <div>
          盘点单备注：
          <div class="remarks" v-html="data.remark"></div>
        </div>
      </div>
      <div>
        <div>序号</div>
        <div>商品信息</div>
        <div>商品单位</div>
        <div>商品备注</div>
        <div>账面库存数量</div>
        <div>账面库存件数</div>
        <div>实盘库存数量</div>
        <div>实盘库存件数</div>
      </div>
      <div v-for="(item, index) in data.inventoryCheckDetails" :key="item.checkDetailId">
        <div>{{ index + 1 }}</div>
        <div>
          <div>
            <div>商品名称：{{ item.productAliasName }}</div>
            <div>规格组合：{{ item.category }}</div>
            <div>SKU编码：{{ item.skuCode }}</div>
            <div>ID：{{ item.checkDetailId }}</div>
          </div>
        </div>
        <div>{{ paramsOption.shop_unit.filter(v => v.dictValue == item.productUnit)[0].dictLabel }}</div>
        <div><div class="remarks" v-html="item.checkRemark"></div></div>
        <div>{{ item.curProductNum }}</div>
        <div>{{ item.curProductPartNum }}</div>
        <div>{{ item.factProductNum || 0 }}</div>
        <div>{{ item.factProductPartNum || 0 }}</div>
      </div>
    </div> -->
    <table border="1" style="width: 100%">
      <thead>
        <th colspan="8" style="height: 50px">盘点清单</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>盘点编码：{{ data.checkCode == null ? "" : data.checkCode }}</td>
          <td>盘点人：{{ data.tenantName == null ? "" : data.tenantName }}</td>
          <td>仓库：{{ data.warehouseName == null ? "" : data.warehouseName }}</td>
          <!-- <td>出库编码：{{ detail?.deliveryNo == null ? "" : detail?.deliveryNo }}</td> -->
          <td colspan="5">
            盘点单备注
            <!-- <div class="remarks" v-html="data.remark"></div> -->
          </td>
        </tr>
        <tr>
          <td style="text-align: center">客户信息</td>
          <td colspan="2" style="height: 40px">
            <div>
              {{
                detail?.customerName == null
                  ? ""
                  : detail?.customerName + "," + detail?.customerMobileCode == null
                    ? ""
                    : detail?.customerMobileCode
              }}
            </div>
          </td>
          <td colspan="6">
            <div class="remarks" v-html="data?.remark"></div>
          </td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>账面库存数量</td>
          <td>账面库存件数</td>
          <td>实盘库存数量</td>
          <td>实盘库存件数</td>
        </tr>
        <tr style="height: 80px" v-for="(item, index) in data.inventoryCheckDetails" :key="item.checkDetailId">
          <td style="text-align: center">{{ index + 1 }}</td>
          <td>
            <div>商品名称:{{ item?.productAliasName == null ? "" : item?.productAliasName }}</div>
            <div>规格组合:{{ item.skuSpecification }}</div>
            <div>SKU编码:{{ item?.skuCode }}</div>
            <div>ID:{{ item?.productId }}</div>
          </td>
          <td>{{ paramsOption.shop_unit.filter(v => v.dictValue == item.productUnit)[0].dictLabel }}</td>
          <td><div class="remarks" v-html="item?.checkRemark"></div></td>
          <td style="text-align: center">{{ item?.curProductNum }}</td>
          <td style="text-align: center">{{ item?.curProductPartNum }}</td>
          <td style="text-align: center">{{ item?.factProductNum }}</td>
          <td style="text-align: center">{{ item?.factProductPartNum }}</td>
        </tr>
      </tbody>
    </table>
    <div class="btn_print">
      <!-- <el-button type="" @click="handelClickBack">返回</el-button> -->
      <el-button type="primary" @click="handelClickPrint">打印</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { detailApi } from "@/apis/procure/inventory-count";
import { selectDictDataByType } from "@/apis/dict/dict";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const data = ref({});
const init = async () => {
  const res = await detailApi({ checkId: route.query.checkId, page: 1, size: 9999 });
  data.value = res.data;
};
const paramsOption = ref({});
/**
 * 获取列表选项字典
 * @param {*} dictType 字典类型
 */
const getDict = async dictType => {
  const res = await selectDictDataByType(dictType);
  paramsOption.value[dictType] = res.data;
};
const handelClickBack = () => {
  router.go(-1);
};
// 打印事件
const handelClickPrint = () => {
  const printWindow = window.open("", "", "height=800,width=800");
  printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Print Content</title>
          <style>
           table {
              border-collapse: collapse;
            }
            table td,
            table th {
              border: 1px solid black;
            }
          </style>
        </head>
        <body>
            <table border="1" style="width: 100%">
      <thead>
        <th colspan="8" style="height: 50px">盘点清单</th>
      </thead>
      <tbody>
         <tr style="height: 40px">
            <td>盘点编码：:${data.value?.checkCode == null ? "" : data.value?.checkCode}</td>
            <td>盘点人：${data.value?.tenantName == null ? "" : data.value?.tenantName}</td>
            <td>仓库：${data.value?.warehouseName == null ? "" : data.value?.warehouseName}</td>
            <td colspan="5">盘点单备注：${data.value?.remark == null ? "" : data.value?.remark}</td>
          </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>账面库存数量</td>
          <td>账面库存件数</td>
          <td>实盘库存数量</td>
          <td>实盘库存件数</td>
        </tr>
        ${data.value?.inventoryCheckDetails.map((item, index) => {
          return `
          <tr style="height: 80px">
            <td style="text-align: center">${index + 1}</td>
            <td>
              <div>商品名称:${item?.productAliasName}</div>
              <div>规格组合:${item.category}</div>
              <div>SKU编码:${item?.skuCode}</div>
              <div>ID:${item?.productId}</div>
            </td>
            <td style="text-align: center">${paramsOption.value.shop_unit.filter(v => v.dictValue == item.productUnit)[0].dictLabel}</td>
            <td style="text-align: center">${item?.checkRemark == null ? "" : item?.checkRemark}</td>
            <td style="text-align: center">${item?.curProductNum || 0}</td>
            <td style="text-align: center">${item?.curProductPartNum || 0}</td>
            <td style="text-align: center">${item?.factProductNum || 0}</td>
            <td style="text-align: center">${item?.factProductPartNum || 0}</td>
          </tr>`;
        })}
      </tbody>
    </table>
        </body>
      </html>
    `);
  printWindow.document.close();
  printWindow.print();
};
// 修改备注富文本样式
const setStyle = () => {
  setTimeout(() => {
    const remarks = document.getElementsByClassName("remarks");
    for (let i = 0; i < remarks.length; i++) {
      const img = remarks[i].querySelector("img");
      const video = remarks[i].querySelector("video");
      if (img) {
        img.style.width = 130 + "px";
      }
      if (video) {
        video.style.width = 130 + "px";
      }
    }
  }, 1000);
};
onMounted(() => {
  const dictArr = ["shop_unit"];
  dictArr.forEach(v => {
    getDict(v);
  });
  init();
  setStyle();
});
</script>

<style lang="scss" scoped>
$border: 1px solid #dcdfe6;
.container {
  padding: 20px;
}
.page {
  > div {
    min-height: 50px;
    border-bottom: $border;
    display: grid;
    grid-template-columns: 1fr 2fr repeat(6, 1fr);

    > div:nth-child(1) {
      border-left: $border;
    }
    > div:nth-child(2) {
      justify-content: start;
    }
    > div {
      border-right: $border;
      line-height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
  }

  > div:nth-child(1) {
    display: grid;
    grid-template-columns: 1fr;
    border-top: $border;
  }

  > div:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 5fr;

    > div {
      text-align: left;
      padding-left: 20px;
    }

    > div:last-child {
      justify-content: start;
    }
  }

  > div:nth-child(3) {
    display: grid;
  }

  .header {
    font-size: 30px;
    font-weight: bold;
  }
}
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black; /* 单元格边框 */
}
.btn_print {
  display: flex;
  justify-content: flex-end;
  // margin-top: 10px;
  padding: 10px 0px;
}
</style>
